require(['./config'], function () {
  require(['jquery', 'template', 'fly', 'zoom', 'loadHF'], function ($, template) {
    class Detail {
      constructor() {
        this.init()
        this.addListener()
        // this.cart = []//存放购物车的数组
        this.cart = JSON.parse(localStorage.getItem("cart")) || []
      }

      // 初始化渲染详情页面
      init () {
        // 获取待加载详情的商品id      ?id=xxxxxxxxx
        const _id = window.location.search.slice(4)
        // 构建请求后端的 url
        const url = `http://www.xiongmaoyouxuan.com/api/detail?id=${_id}`
        // ajax请求
        $.getJSON(url, resp => {
          // console.log(resp, 'resp')
          // 获取响应数据中使用的商品信息部分
          const _prod = resp.data.detail
          // 准备渲染的数据
          const data = { prod: _prod }
          // console.log(data)
          // 利用模板引擎渲染
          const html = template("detail-template", data)
          // 显示渲染结果
          $(".detail_box").prepend(html)

          // 添加放大镜效果
          $("img.prod-img").elevateZoom({
            gallery: 'gallery',
            cursor: 'pointer',
            galleryActiveClass: 'active',
            tint: true,
            tintColour: '#F90',
            tintOpacity: 0.5
          })
        })
				/*$.ajax({
					type: "get/post",
					url,
					data,
					dataType,
					success
				})
				$.get(url, data, success, dataType)
				$.getJSON(url, data, success)
				$.post()*/
        // 等待DOM树渲染完成之后才能使用zoom放大镜
        // $("img.prod-image").elevateZoom({
        //   gallery: 'gallery',
        //   cursor: 'pointer',
        //   galleryActiveClass: 'active',
        //   tint: true,
        //   tintColour: '#F90',
        //   tintOpacity: 0.5
        // })
      }
      // 注册事件监听
      addListener () {
        // console.log('注册事件监听', $(".form-add-to-cart"))
        // 点击加入购物车按钮，触发表单提交事件
        // 拿不到页面元素是因为：渲染页面的操作是异步的，此时的页面并没有渲染出来
        // 解决方法：
        // 使用页面已经存在的元素做事件委派(已有元素：detail_box)

        // 事件委派的几种方式（在jQuery中）
        // $(".detail_box").on("submit", " .form-add-to-cart", this.addToCartHandler)//on也可以用做事件委派，如果第二个参数传的是元素选择器
        // 由于在加入购物车时需要用到鼠标的位置，就要用到事件event对象，而submit无法获得事件event对象，所以此时要换用click事件
        $(".detail_box").on("click", " .form-add-to-cart input:submit", this.addToCartHandler.bind(this))
        // 另一种事件委派方式

        // $(".form-add-to-cart").on("submit", this.addToCartHandler)
      }
      // 加入购物车事件处理程序
      addToCartHandler (e) {
        // 阻止表单默认提交
        e.preventDefault()
        // jQuerry中的文档处理（用以查找元素、筛选元素）
        // 获取表单的祖先元素
        const parents = $(e.target).parents(".prod-detail")
        // 获取当前选购商品的信息
        const currProd = {
          id: parents.data('id'),//相当于原生的想要获取自定义属性用dataset
          title: parents.find(".prod-title").text(),
          image: parents.find(".prod-img").attr("src"),
          price: parents.find(".prod-price").text(),
          amount: 1
        }
        // 确认一下locaStorage中保存的购物车数组
        // 如果不确认的话可能会导致同时打开多个详情页面添加购物车时出现问题
        this.cart = JSON.parse(localStorage.getItem("cart")) || []
        // 在将当前选购商品添加到购物车数组之前先判断该数组中是否已经存在了当前商品
        // 注意以下的this指向
        const has = this.cart.some(prod => prod.id === currProd.id)
        // 如果存在当前商品则amount加一（修改数组），不存在就直接添加到数组中
        if (has) {
          this.cart.map(prod => {
            if (prod.id === currProd.id) {
              prod.amount++
              return prod
            }
          })
        } else {
          this.cart.push(currProd)
        }
        // 当打开新的detail页面加入购物车时，会重新new一下detail页面，这会导致cart被清空，因此需要稳定的存储cart数据，
        // 这就用到了本地存储技术
        localStorage.setItem('cart', JSON.stringify(this.cart))
        // 加入购物车成功，实现抛物线效果
        this.fly(e)
      }
      // 抛物线函数
      fly (e) {
        // console.log(e, '抛物线')这个e已经被jQuery包装成了实例
        // 运动的初始位子
        const start = {
          top: e.pageY,
          left: e.pageX
        }
        // 运动的结束位置
        const end = $('.bag').offset()
        // 待运动的元素
        const flyHtmlImg = $('.prod-img').attr("src")
        const flyer = $(`<img src="${flyHtmlImg}" style="width:40px;">`)
        // 实现抛物线运动
        flyer.fly({
          start,
          end,
          onEnd () {
            this.destroy()
          }
        })
      }
    }

    new Detail()
  })
})